<div class="component-demo">
  <a [id]="id"></a>
  <h2>
    <a [routerLink]="" [fragment]="id" ngbdFragment title="Anchor link to demo: {{id}}">
      <img src="img/link-symbol.svg" alt="Anchor link to: {{id}}" />
    </a>
    <span>{{ demoTitle }}</span>
    <a role="button" (click)="trackStackBlitzClick()" class="stackblitz btn btn-light" target="_blank" href="app/components/{{component}}/demos/{{id}}/stackblitz.html" title="Edit in StackBlitz">
      <img class="stackblitz-icon" src="img/stackblitz-icon.svg" alt="StackBlitz icon"/>
      StackBlitz
    </a>
  </h2>
  <div class="card">
    <div class="card-body">
      <ng-content></ng-content>
    </div>
    <ngb-tabset class="tabset-code">
      <ngb-tab id="{{component}}-{{id}}-html">
        <ng-template ngbTabTitle>
          <small class="badge badge-secondary" title="HTML template">T</small>
          <span class="ml-2">{{component}}-{{id}}.html</span>
        </ng-template>
        <ng-template ngbTabContent>
          <ngbd-code [code]="markup" lang="html"></ngbd-code>
        </ng-template>
      </ngb-tab>
      <ngb-tab id="{{component}}-{{id}}-typescript">
        <ng-template ngbTabTitle>
          <small class="badge badge-info" title="Component class">C</small>
          <span class="ml-2">{{component}}-{{id}}.ts</span>
        </ng-template>
        <ng-template ngbTabContent>
          <ngbd-code [code]="code" lang="typescript"></ngbd-code>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
  </div>
</div>
